<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>html</title>
</head>

<style>
    *{margin: 0;padding: 0;font-size:12px}
    body{background-color: #F5F5F5}
    a{text-decoration: none;}
    li{list-style-type: none;}

    .top{width: 100%}
    .top ul{width: 1000px;height: 30px;margin: 0 auto;
        background-image: url("../company/images/top_bg.jpg");
        background-repeat: repeat-x;}
    .top ul li{float: right;width: 80px;line-height: 30px;
        list-style-image: url("../company/images/arrow.jpg")}

    .content   {width: 1000px;background-color: white;margin: 0 auto}

    .content_1 {width: 100%;height: 80px;position: relative}
    .logo      {position: absolute;left: 50px;}
    .tel       {position: absolute;right: 10px;bottom: 15px;height: 28px;}
    .tel img   {height: 28px;vertical-align: middle;}
    .tel_span  {height: 28px;display: inline-block;vertical-align: middle;}
    .tel_span_1{color: grey;line-height: 30px}
    .tel_span_2{font-size: 19px;color: red;line-height: 28px}

    .content_2{height: 300px;background-image: url("../company/images/ad2.jpg");}

    .content_3{height: 250px;margin-top: 10px}

    .content_3_left{width: 340px;height:100%;display: inline-block;border: 1px solid #8E8E8E;vertical-align: middle}

    .header{height: 30px;background-color: white;color: #8E8E8E;
                position: relative;line-height: 30px;
                border-bottom: 1px solid #8E8E8E;padding: 0px 5px;}
    .header a{right: 10px;position: absolute}

    .content_3_left .middle{height: 98px;background-color: white;margin: 4px}
    .content_3_left .middle div{display: inline-block;line-height: 24px;padding-left: 5px}

    .content_3_left .bottom {position: relative}
    .content_3_left .bottom ul{line-height: 24px}
    .content_3_left .bottom ul li{background: url("../company/images/list.jpg") no-repeat;list-style-type: none;
        margin: 4px;padding: 0px 3px;border-bottom: 1px dotted #8E8E8E}
    .content_3_left .bottom span{position: absolute;right: 5px;color: #8E8E8E}

    .content_3_middle{width: 412px;display: inline-block;height: 250px;
        border: 1px solid #8E8E8E;vertical-align: middle}
    .middle{height: 116px;background-color: white;margin: 5px; position: relative}
    .middle_left{padding-left: 5px;position: absolute;left: 170px; top: 0px;line-height: 18px}
    .middle_left h1{color: red;}
    .content_3_middle .bottom ul{width:372px;height: 27px;text-align: center;margin: 20px auto;
        background: url("../company/images/product_type_bg.jpg") no-repeat}
    .content_3_middle .bottom ul li{float: left;line-height: 37px;margin: 0 17px}

    .content_3_right{width: 230px;display: inline-block;height: 250px;
        border: 1px solid #8E8E8E;vertical-align: middle}
    .content_3_right .middle{margin: 5px}
    .content_3_right .middle img{margin-top: 5px}

    .footer{background-color: #E8e8E8;width: 100%;height: 200px;margin-top: 10px;padding-top: 20px}
    .footer_content{width: 1000px;margin: 0 auto;}
    .footer_content ul li {width: 200px;float: left;line-height: 30px;text-align: center;
        background: url("../company/images/line.png") no-repeat right center}
    .footer_content ul li a{font-size: 18px;color: #8E8E8E;}
    .footer_content ul li ul li a{font-size: 14px;color: #8E8E8E;}
</style>

<body>

<div>
    {{--顶部--}}
    <div class="top">
        <ul>
            <li>加入收藏</li>
            <li>联系我们</li>
            <li>设置首页</li>
        </ul>
    </div>

    {{--内容--}}
    <div class="content">
        {{--logo--}}
        <div class="content_1">
            <img class="logo" src="../company/images/logo.jpg" alt="">
            <div class="tel">
                <img src="../company/images/tel.jpg" alt="">
                <span class="tel_span tel_span_1">24小时服务热线：</span>
                <span class="tel_span tel_span_2">185-6569-1927</span>
            </div>
        </div>

        <div class="content_2"></div>

        <div class="content_3">
            <div class="content_3_left">
                <div class="header">
                    <span>新闻中心</span>
                    <a href="">More &gt;&gt;</a>
                </div>

                <div class="middle">
                    <img src="./company/images/news.jpg" alt="">
                    <div>
                        <p>520 慕女神喊你来表白!</p>
                        <p>活动时间：5月20日——5月25日</p>
                        <p>获奖公布时间：5月26日</p>
                        <p><a href="">Learn More &gt;&gt;</a></p>
                    </div>
                </div>

                <div class="bottom">
                    <ul>
                        <li><a>&nbsp&nbsp慕客访谈 用户篇】“有为屌丝”在路上</a> <span>2014-06-01</span></li>
                        <li><a>【有奖活动】给父亲的三行书信</a> <span>2014-05-30</span></li>
                        <li><a>《程序猿，请晒出你的童年》活动获奖公告</a> <span>2014-05-28</span></li>
                        <li><a>【慕课访谈】破茧成蝶——美女程序员的蜕变史</a> <span>2014-05-28</span></li>
                    </ul>
                </div>
            </div>

            <div class="content_3_middle">
                <div class="header">
                    <span>课程中心</span>
                    <a href="">More &gt;&gt;</a>
                </div>
                <div class="middle">
                    <img src="./company/images/css.jpg" alt="">
                    <div class="middle_left">
                        <h1>CSS圆角进化论</h1>
                        <div>
                            CSS圆角的实现，经历了三大发展阶段：背景图片方式、CSS2.0+HTML标签模拟、CSS3.0圆角属性）。本案例详细讲解每一种的实现方式，并对实现的优缺点进行对比分
                        </div>
                    </div>
                </div>

                <div class="bottom">
                    <ul>
                        <li>PHP开发</li>
                        <li>前端开发</li>
                        <li>JAVA开发</li>
                        <li>Android开发</li>
                    </ul>
                </div>

            </div>

            <div class="content_3_right">
                <div class="header">
                    <span>媒体聚焦</span>
                    <a href="">More &gt;&gt;</a>
                </div>

                <div class="middle">
                    <embed src="http://player.youku.com/player.php/sid/XNjkzMDE5MTUy/v.swf" height="150" width="100%">
                    <img src="../company/images/app.jpg" alt="">
                </div>
            </div>
        </div>

    </div>

    <!-- 底部 -->
    <div class="footer">
        <div class="footer_content">
            <ul>
                <li>
                    <a href="">关于</a>
                    <ul>
                        <li><a href="">品牌故事</a></li>
                        <li><a href="">联系我们</a></li>
                        <li><a href="">加入我们</a></li>
                        <li><a href="">版权声明</a> </li>
                    </ul>
                </li>
                <li>
                    <a href="">课程</a>
                    <ul>
                        <li><a href="">PHP开发</a></li>
                        <li><a href="">前端开发</a></li>
                        <li><a href="">JAVA开发</a></li>
                        <li><a href="">Android开发</a></li>
                    </ul>
                </li>
                <li>
                    <a href="">关注</a>
                    <ul>
                        <li><a href="">新浪微博</a></li>
                        <li><a href="">腾讯微博</a></li>
                        <li><a href="">企业微信</a></li>
                        <li><a href="">QQ空间</a></li>
                    </ul>
                </li>
                <li>
                    <a href="">留言</a>
                    <ul>
                        <li><a href="">意见反馈</a></li>
                        <li><a href="">问题留言</a></li>
                        <li><a href="">媒体联络</a></li>
                        <li><a href="">在线客服</a></li>
                    </ul>
                </li>
                <li>
                    <img src="../company/images/weixin.png" alt=""/>微信关注
                    <ul>
                        <img src="../company/images/qrcode.jpg" alt=""/>
                    </ul>
                </li>
            </ul>

        </div>
    </div>
</div>
</body>
</html>